<template>
  <div class="cart-list">
    <div v-for="(item, index) in cart" class="cart-list-item" >
      <cart-button class="button" @click.native="listClick(index)" :checked="item.checked"/>
      <img :src="item.imgURL">
      <div class="describe">
        <p class="title">{{item.title}}</p>
        <p class="desc">{{item.desc}}</p>
        <div class="num">
          <p class="price">￥{{item.price}}</p>
          <span class="count">x{{item.count}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import CartButton from "./CartButton";

  export default {
    name: "CartList",
    props:{
      cart:{
        type:Array,
        default(){return []}
      }
    },
    methods:{
      listClick(index){
        this.cart[index].checked = !this.cart[index].checked;
      }
    },
    components:{
      CartButton
    }
  }
</script>

<style scoped>
  .describe{
    margin-left: 15px;
  }
  .price{
    color: orangered;
  }
  .num{
    display: flex;
  }
  .count{
    position: absolute;
    margin-top: 28px;
    right: 10px;
  }
  .title{
    font-size: 18px;
  }
  .desc{
    font-size: 13px;
    color: var(--color-text);
  }
  p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:calc(100vw - 80px - 20px - 20px);
    margin-top: 15px;
  }
  img{
    width: 80px;
    height: 100px;
    border-radius: 6px;
    align-self: center;
  }
  .cart-list-item{
    display: flex;
    height: 130px;
    padding: 7px 10px;
    border-bottom: rgba(100,100,100,0.3) 1px solid;
  }
  .button{
    align-self: center;
  }
</style>